<template>
  <div class="wrapper">
    <div class="login-box">
      <el-form ref="login" :model="login" :rules="rules">
        <el-form-item prop="username">
          <el-input
            placeholder="请输入帐号/手机号码"
            v-model="login.username">
            <i slot="suffix" class="el-input__icon el-icon-date"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="请输入您的密码"
            v-model="login.password">
            <i slot="suffix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button class="submit-button" type="primary" @click="onSubmit('login')">登录</el-button>
        </el-form-item>
      </el-form>
      
    </div>

  </div>
  
</template>

<script>
export default {
  data(){
    return {
      login: {
        stype: 3,
        username: window.localStorage.getItem('_uname_') || '',
        password: window.localStorage.getItem('_uid_') || ''
      },
      rules: {
        username: [
          { required: true, message: '请输入帐号/手机号码', trigger: 'blur'}
        ],
        password: [
          { required: true, message: '请输入您的密码', trigger: 'blur'}
        ]
      }
    }
  },
  methods:{
    onSubmit (formName) {
      console.log("登录");
      var that = this;
      this.$refs[formName].validate((valid) => {
          if (valid) {
            
            //  发送网络请求
            this.postRequest(this.$urls.LOGIN, that.login).then(resp=> {
                console.log(resp);
                sessionStorage.setItem('_token_id', resp.id);
                sessionStorage.setItem('_token_uid', resp.uid);
                sessionStorage.setItem('_token_utype', resp.stype);
                // 去除姓名的空格
                if (resp.uname) {
                  var unameStr = resp.uname;
                  unameStr = unameStr.replace(/\s+/g,"");
                  sessionStorage.setItem('_token_uname', unameStr);
                }
                sessionStorage.setItem('_token_loginuuid', resp.loginUuid);
                that.getBasicinfo();
                that.$router.replace('/orders/video');
            });

          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    getBasicinfo() {
      this.getRequest(this.$urls.BASICINFO).then(resp => {
        console.log('基本信息：', resp);
        sessionStorage.setItem('_local_info',JSON.stringify(resp.special));
      });
    }
  },
  created(){},
}
</script>
<style lang="less" scoped>

.wrapper {
  width: 100%;
  height: 100%;
  background: url(https://www.ebaiyihui.com/app/img/login/bg.jpg) center center / cover no-repeat;
  .login-box {
    position: relative;
    top: 25%;
    left: 30%;
    width: 40%;
    height: 50%;
    min-width: 360px;
    height: 400px;
    max-width: 460px;
    padding: 100px 50px;
    background-color: #ffffff;
    box-sizing: border-box;
    border-radius: 5px;
    box-shadow: 0 0 22px 2px #9e9c9c;
    text-align: center;
    .submit-button {
      width: 80%;
      height: 44px;
      margin-top: 50px;
      background-color: @base_blue_color;
      border-radius: 22px;
      font-size: 16px;
    }
  }
}
</style>